程式概念

昨天我們提到video可以做各種影片常用的操作，例如看影片時的暫停以及播放，過去在看各種平台影片的時候，有些平台可以按下暫停鍵、有些平台則是點下螢幕，這部分我們可以用onClick 來確認，所以今天我們需要的，就是一個onClick的function。

決定state播放的狀態，可以是一個true or false的bool const，所以使用useState來設定，並且給一個設定const的setup function，將false toggle成true、true toggle成false。

同時，這裡我們需要一個videoRef來決定現在是要pause還是play，可以使用useRef 決定

完整code

// VideoCard.js
import React, { useRef, useState } from 'react'
import './VideoCard.css'

const VideoCard = () => {
    const [playing, setPlaying] = useState(false)
    const videoRef = useRef(null)

    const handleVideoPress = () => {
        if (playing) {
            videoRef.current.pause()
            setPlaying(false)
        } else {
            videoRef.current.play()
            setPlaying(true)
        }
    }

    return (
        <div className='VideoCard'>
            <video
                src="/video.mp4"
                className='videoCard_player'
                alt="Short Video app"
                loop
                ref={videoRef}
                onClick={handleVideoPress}
            />
        </div>
    )
}

export default VideoCard